<template>
	<view class="bg">
		<view class="range">
			<view class="range_min">
				<input type="number" v-model="minNumber" placeholder="最小值" @input="checkNum">
			</view>
			<view class="range_bolang">
				~
			</view>
			<view class="range_max">
				<input type="number" v-model="maxNumber" placeholder="最大值" @input="checkNum">
			</view>
		</view>
		<view class="random_number">
			{{randomNum}}
		</view>
		<view class="btn_num">
			<button @click="createRandomNum">生成随机数</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				minNumber: 0, // 最小值
				maxNumber: 100, // 最大值
				randomNum: '20' // 随机数
			}
		},
		onLoad() {
			// 加载分享菜单
			this.loadingShareMenu();
		},
		methods: {
			// 检查最大值和最小值是否符合数字
			checkNum() {
				var minNum = Number(this.minNumber);
				var maxNum = Number(this.maxNumber);
				if(minNum < 0 || maxNum < 0){
					uni.showToast({ //显示对话框
						title: "请输入大于0的数字",
						icon: 'none',
						duration: 1000,
					})
				}
				if (isNaN(minNum) || isNaN(maxNum)) {
					uni.showToast({ //显示对话框
						title: "请输入数字",
						icon: 'none',
						duration: 1000,
					})
				}
			},
			// 点击按钮生成随机数
			createRandomNum() {
				if (isNaN(Number(this.minNumber)) || isNaN(Number(this.maxNumber))) {
					uni.showToast({ //显示对话框
						title: "输入不符合规范",
						icon: 'none',
						duration: 1000,
					})
				} else {
					this.randomNum = this.RandomNumBoth(Number(this.minNumber),Number(this.maxNumber));
				}
			},

			// 生成随机数的方法
			RandomNumBoth(Min, Max) {
				var Range = Max - Min;
				var Rand = Math.random();
				var num = Min + Math.round(Rand * Range); //四舍五入
				return num;
			},
			
			// 加载分享菜单
			loadingShareMenu() {
				wx.showShareMenu({
					withShareTicket: true,
					//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus: ["shareAppMessage", "shareTimeline"]
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@import url('../../static/css/basic.css');

	.range {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.range_min {
			width: 40%;

			input {
				height: 100rpx;
				border-radius: 10rpx;
				border: 1px solid #0bb9c2;
				text-align: center;
				color: #0bb9c2;
				font-size: 16px;
			}
		}

		.range_bolang {
			width: 10%;
			font-size: 20px;
			color: #ffaa7f;
			text-align: center;
		}

		.range_max {
			width: 40%;

			input {
				height: 100rpx;
				border-radius: 10rpx;
				border: 1px solid #0bb9c2;
				text-align: center;
				color: #0bb9c2;
				font-size: 16px;
			}
		}
	}

	.random_number {
		margin-top: 100rpx;
		width: 400rpx;
		height: 400rpx;
		border: 1px solid #0bb9c2;
		border-radius: 50%;
		color: #830062;
		font-size: 25px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		line-height: 200px;
	}

	.btn_num {
		width: 70%;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;

		button {
			width: 100%;
			height: 100rpx;
			background-color: #ea9c74;
			border-radius: 10rpx;
			box-shadow: 2px 2px 4px #8d5e46;
			color: #7000a8;
			font-size: 20px;
			letter-spacing: 2px;
		}
	}
</style>
